<template>
	<a-layout-header :class="styles.navbar">
		<section class="w-full flex justify-between items-center gap-x-8">
			<nuxt-link :to="localePath('/website')" :class="styles.logo" class="app-link capitalize">
				<i-icons-logo class="size-40px" />
			</nuxt-link>
			<nav v-show="appStore.deviceType === 1" :class="styles.linksList">
				<nuxt-link class="app-link" :to="localePath('/')"> {{ t("console.nav.workbench") }} </nuxt-link>
				<nuxt-link class="app-link" :to="localePath('/domain')"> {{ t("console.nav.domain") }} </nuxt-link>
				<!--
        <nuxt-link class="app-link" @click="handleNavigateTo">navigate</nuxt-link>
				<nuxt-link class="app-link" :to="localePath('/site/detail/2123')"> 路由参数1 </nuxt-link>
				<nuxt-link class="app-link" :to="localePath('/web/api/get/2123')"> 路由参数2 </nuxt-link>
				<nuxt-link class="app-link" :to="localePath('/test')"> test-会重定向到site </nuxt-link>
        -->
				<a-popover v-model:popup-visible="productPopupVisible" :content-class="styles.popoverContent">
					<nuxt-link class="app-link" href="javascript:void(0)">
						{{ t("console.nav.products", { count: 2 }) }}
						<icon-caret-down />
					</nuxt-link>
					<template #content>
						<div class="grid grid-cols-2 gap-[40px]">
							<div v-for="product in products" :key="product.title" class="flex flex-col gap-6">
								<label class="uppercase text-5 text-base/6 font-600">
									{{ product.title }}
								</label>
								<div v-for="item in product.items" :key="item.link" class="flex flex-col">
									<nuxt-link class="app-link is-icon capitalize text-base/6" :to="localePath(item.link)">
										<component :is="item.icon" class="size-6" />
										<span>{{ item.title }}</span>
									</nuxt-link>
								</div>
							</div>
						</div>
					</template>
				</a-popover>

				<a-popover v-model:popup-visible="langPopupVisible" :content-class="styles.popoverContent" trigger="hover">
					<nuxt-link class="app-link" href="javascript:void(0)">
						{{ currentLocale.label }}
						<icon-caret-down />
					</nuxt-link>
					<template #content>
						<div class="flex flex-col gap-6">
							<nuxt-link
								v-for="item in locales"
								:key="item.locale"
								class="app-link is-icon capitalize text-base/6"
								:to="switchLocalePath(item.locale)"
							>
								{{ item.label }}
							</nuxt-link>
						</div>
					</template>
				</a-popover>
				<nuxt-link class="app-link" :to="localePath('/about')">
					{{ t("console.nav.about") }}
				</nuxt-link>
			</nav>
			<section v-show="appStore.deviceType !== 1" @click="handleClick"><icon-menu :size="24" class="app-menu" /></section>
		</section>
		<drawer-menu v-model:loading="drawerState.loading" v-model:visible="drawerState.visible"></drawer-menu>
	</a-layout-header>
</template>

<script setup lang="ts">
import styles from "./navbar.module.css";
import { products } from "~/constants/product";

const switchLocalePath = useSwitchLocalePath();
const localePath = useLocalePath();
const productPopupVisible = ref(false);
const langPopupVisible = ref(false);
const appStore = useAppStore();
const route = useRoute();
const { t } = useI18n();
const { locales, currentLocale } = useAppLocale();
const drawerState = reactive({
	visible: false,
	loading: false
});

watch(
	() => route.path,
	() => {
		productPopupVisible.value = false;
		langPopupVisible.value = false;
	},
	{ deep: true }
);
// const handleNavigateTo = () => {
// return toast.error("Strictly forbidden.");
// navigateTo("https://www.jd.com", {
// 	replace: false, //默认为false，为true时会替换当前路由页面
// 	external: true //默认为false，不允许导航到外部连接，true则允许
// });
// };
const handleClick = () => {
	drawerState.visible = true;
};
</script>
